import React from 'react';
import { ModuleConfig } from '@rasir/x6-arch/es/types';
import { Button } from 'antd';
import dayjs from 'dayjs';
const config: ModuleConfig = {
  title: '架构自助设计系统',
  search: {
    placeholder: '请输入组件名称',
  },
  options: [
    {
      label: '用户层组件',
      value: 'userLayer',
      children: [
        {
          label: 'USER',
          icon: 'userIcon',
          moduleType: 'user',
          moduleImage: 'user',
          value: 'user',
          target: ['user'],
          moduleProp: [
            {
              type: 'INPUT',
              label: '用户名称',
              name: 'userName',
              inputProps: {
                allowClear: true,
                placeholder: '请输入用户名称',
                className: 'search-input',
              },
              rules: [
                {
                  required: true,
                  message: '请选择使用时长',
                },
              ],
            },
            {
              label: '使用时长',
              name: 'time',
              type: 'SELECT',
              inputProps: {
                placeholder: '请选择使用时长',
                options: [
                  { label: '1周', value: '1week' },
                  { label: '1月', value: '1month' },
                  { label: '1年', value: '1year' },
                ],
              },
              rules: [
                {
                  required: true,
                  message: '请选择使用时长',
                },
              ],
            },
            {
              type: 'REMOTESELECT',
              label: '负责人',
              name: 'ownerId',
              inputProps: {
                allowClear: true,
                remote: async (val: string) => {
                  if (!val) return [];
                  return [
                    { label: val, value: val },
                    { label: `${val}1`, value: `${val}1` },
                    { label: `${val}2`, value: `${val}2` },
                    { label: `${val}3`, value: `${val}3` },
                  ];
                },
                className: 'search-ownerId',
                placeholder: '请输入负责人ID',
              },
              rules: [
                {
                  required: true,
                  message: '请选择使用时长',
                },
              ],
            },
            {
              type: 'DATERANGER',
              label: '使用时间',
              name: 'createTm',
              inputProps: {
                allowClear: true,
                disabledDate: (current) => {
                  return current && current > dayjs().endOf('day');
                },
                renderExtraFooter: () => {
                  return (
                    <div style={{ padding: 10 }}>
                      <Button style={{ marginRight: 10 }} type="primary">
                        最近一周
                      </Button>
                      <Button style={{ marginRight: 10 }} type="primary">
                        最近一月
                      </Button>
                      <Button style={{ marginRight: 10 }} type="primary">
                        最近一年
                      </Button>
                    </div>
                  );
                },
              },
            },
          ],
        },
        {
          label: 'APP',
          icon: 'appIcon',
          value: 'app',
          target: ['user'],
          moduleProp: [],
        },
      ],
    },
    {
      label: '云主机',
      value: 'clound',
      children: [
        {
          label: 'Jetty',
          icon: 'jettyIcon',
          value: 'jetty',
          moduleProp: [],
        },
        {
          label: 'Nginx',
          icon: 'nginxIcon',
          value: 'nginx',
          moduleProp: [],
        },
        {
          label: 'Other',
          icon: 'otherIcon',
          value: 'other',
          moduleProp: [],
        },
      ],
    },
    {
      label: '裸金属',
      value: 'mate',
      children: [
        {
          label: 'BMS',
          icon: 'bmsIcon',
          value: 'bms',
          moduleProp: [],
        },
      ],
    },
    {
      label: 'K8S容器',
      value: 'k8s',
      children: [
        {
          label: 'Dubbo',
          icon: 'dubboIcon',
          value: 'dubbo',
          moduleProp: [],
        },
        {
          label: 'SpringBoot',
          icon: 'springbootIcon',
          value: 'springboot',
          moduleProp: [],
        },
        {
          label: 'NODEJS',
          icon: 'nodejsIcon',
          value: 'nodejs',
          moduleProp: [],
        },
        {
          label: 'PYTHON',
          icon: 'pythonIcon',
          value: 'python',
          moduleProp: [],
        },
        {
          label: 'Jetty',
          icon: 'jettyIcon',
          value: 'jetty',
          moduleProp: [],
        },
        {
          label: 'Nginx',
          icon: 'nginxIcon',
          value: 'nginx',
          moduleProp: [],
        },
      ],
    },
    {
      label: '中间件',
      value: 'middelwear',
      children: [
        {
          label: 'Redis',
          icon: 'redisIcon',
          value: 'redis',
          moduleProp: [],
        },
        {
          label: 'Kafka',
          icon: 'kafkaIcon',
          value: 'kafka',
          moduleProp: [],
        },
        {
          label: 'Zookeeper',
          icon: 'zookeeperIcon',
          value: 'zookeeper',
          moduleProp: [],
        },
      ],
    },
    {
      label: '数据库',
      value: 'database',
      children: [
        {
          label: 'MySQL',
          icon: 'mysqlIcon',
          value: 'mysql',
          moduleProp: [],
        },
      ],
    },
  ],
};
export default config;
